<template>
	<list reqUrl="/api/uaddress" formatData :handleFormat="handleFormat" ref="listInstance" emptyText="暂无地址请添加地址"
		:empty-img="addressEmpty" :immediatecheck="false">
		<template v-slot=" { list }">
			<view class="list_c">
				<view v-for="(item, index) in list" :key="item.address_id" @click="back(item)" class="address">
					<view class="head">
						<text>{{ item.name }}</text>
						<text class="tel">{{ item.tel }}</text>
					</view>
					<view class="addr">
						<text>{{ item.province }}</text>
						<text>{{ item.city }}</text>
						<text>{{ item.area }}</text>
						<text>{{ item.address }}</text>
					</view>
					<view class="bottom_bar">
						<view class="center" @click.stop="setDefault(item,index)" hover-class="hover">
							<uni-icons :type="item.default === 1?'circle-filled':'circle'" size="24"
								:color="item.default === 1?primaryColor:'#BFBFBF'"></uni-icons>
							<text class="default_text">{{ item.default === 1 ? '已设为默认' : '设为默认' }}</text>
						</view>
						<view class="right">
							<view @click.stop="update(item,index)" class="center" hover-class="hover">
								<image src="/static/image/update.png" class="icon" />
								<text>修改</text>
							</view>
							<view @click.stop="del(item,index)" class="del center" hover-class="hover">
								<image src="/static/image/del.png" class="icon" />
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</list>
	<fixed-button @touch="goAddAddress">添加地址</fixed-button>
</template>

<script setup>
	import { nextTick, ref } from 'vue';
	import { onPullDownRefresh, onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { sleep } from '@/utils/common/index';
	import request from '@/utils/common/request/index';
	import addressEmpty from '/static/image/address-empty.png';
	import { useCacheStore } from '@/store/modules/useCacheStore';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();

	// * 是否为上页选择地址
	let isChoose = false;
	let showChooseTip = false;
	onLoad((option) => {
		if (option.choose) {
			isChoose = true;
			showChooseTip = true;
		}
	})

	onShow(() => {
		nextTick(async () => {

			// #ifdef H5
			await sleep(10);
			// #endif

			listInstance.value.resetRequest();
		})
	})

	const listInstance = ref(null);
	/**数据格式化函数 */
	const handleFormat = (res) => {
		res.data.forEach(item => {
			item.default = item.is_default ? 1 : 0;
		})
		if (showChooseTip && res.data.length > 0) {
			uni.showToast({
				title: '请点击你要选择的收货地址',
				icon: 'none'
			});
			showChooseTip = false;
		}
		return res.data;
	};

	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});

	// * 设为默认地址
	const setDefault = (address, index) => {
		if (address.default === 1) return uni.showToast({
			title: '已是默认地址',
			icon: 'none',
		});
		uni.showModal({
			title: '提示',
			content: '您确实设置该地址为默认地址吗？',
			confirmColor: primaryColor.value,
			success(res) {
				if (res.cancel) return;
				request({
					url: '/api/setdefault',
					method: 'POST',
					data: {
						address_id: address.address_id,
					}
				}).then(() => {
					uni.showToast({
						title: '设置成功',
						icon: 'success',
					});
					let list = listInstance.value.captureList();
					const defaultIndex = list.findIndex(item => {
						return item.default === 1;
					})

					if (defaultIndex !== -1) list[defaultIndex].default = 0;
					list[index].default = 1;
				})
			}
		});
	}

	// * 删除地址
	const del = (address, index) => {
		uni.showModal({
			title: '提示',
			content: '您确实删除该地址吗？',
			confirmColor: primaryColor.value,
			success(res) {
				if (res.cancel) return;
				request({
					url: '/api/deladdress',
					method: 'POST',
					data: {
						address_id: address.address_id
					}
				}).then(() => {
					let list = listInstance.value.captureList();
					list.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success',
					});
				})
			}
		});
	};

	// * 修改地址
	const update = (address, index) => {
		const address_id = address.address_id
		uni.navigateTo({
			url: "/pages/address-addoredit/address-addoredit?id=" + address_id
		})
	}

	// * 前往添加收货地址
	const goAddAddress = () => {
		uni.navigateTo({
			url: "/pages/address-addoredit/address-addoredit"
		})
	}

	// * 选择地址
	const back = (address) => {
		if (!isChoose) return;
		const cacheStore = useCacheStore();
		cacheStore.setStorageData({
			data: address,
			field: 'addressStorage',
		})
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.list_c {
		padding: 14px 14px 0;
	}

	.address {
		margin-bottom: 10px;
		padding: 10px 14px 0;
		background-color: #fff;
		overflow: hidden;
		border-radius: 5px;

		.head {
			font-size: 16px;
			font-weight: bold;
			color: #000;

			.tel {
				margin-top: 3px;
				margin-left: 30px;
			}
		}

		.addr {
			margin: 3px 0 10px 0;
			font-size: 14px;
			color: #666666;

			span {
				margin-right: 4px;
			}
		}

		.bottom_bar {
			display: flex;
			justify-content: space-between;
			padding: 12px 0;
			color: #999;
			border-top: 1px solid #f6f6f6;

			.default_text {
				margin-left: 3px;
			}

			.right {
				display: flex;

				.icon {
					margin-right: 2px;
					width: 12px;
					height: 12px;
				}

				.del {
					margin-left: 25px;
				}
			}
		}
	}
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>